import "../index.scss";
import $ from "jquery";
require("webpack-jquery-ui");
require("webpack-jquery-ui/css");
import { leftbars, common, phoneIcon, marketing, shop, groupBuy } from "../initdata/leftbars";
import VueDragResize from "vue-drag-resize";
import { initialdata } from "../initdata/initialdata";
import { PageSet } from "@/utils/indexfun";
import { Container, Draggable } from "vue-smooth-dnd";
import { mapGetters } from "vuex";
import VueQr from 'vue-qr';
import components from "./components";
import {
  addApplyGroup,
  getApplyPageList,
  alpplyPages,
  delPage,
  delGroup,
  savePageJSON
} from "@/api/apply";
import { GetEmpower } from "@/api/wx_config";
// getPageDetail,
export default {
  display: "Transition",
  components: {
    VueQr,
    Container,
    Draggable,
    VueDragResize,
    ...components
  },
  computed: {
    ...mapGetters(["backStyle", "isSave", "tabbarObj"]),
    dragOptions() {
      return {
        animation: 0,
        group: "people",
        disabled: false,
        ghostClass: "ghost",
        scroll: true
      };
    }
  },
  watch: {
    isSave(val) {
      console.log(val)
      var nodes = $(".box")[0].children;
      if (nodes.length === 0) {
        this.$message("页面为空")
        this.$store.commit("apply/SET_ISSAVE", false);
      } else {
        if (val === true) {
          // 遮罩层
          const loading = this.$loading({
            lock: true,
            text: '保存中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          this.Sort()
          setTimeout(() => {
            var pageJson = JSON.parse(localStorage.getItem("page_json"));
            localStorage.setItem("page_json", JSON.stringify(pageJson));
            savePageJSON(pageJson, this.$route.query.applyId).then(res => {
              loading.close();
              this.$store.commit("apply/SET_ISSAVE", false);
              this.$message({
                message: res.msg,
                type: 'success'
              });
              if (res.code === 200) {
                console.log('保存成功')
                // 判断应用是否已授权
                GetEmpower(this.$route.query.applyId).then(res => {
                  console.log(res);
                  if (res.code === 400) {
                    this.$confirm('该应用还未进行微信授权，是否立即前往授权', '提示', {
                      confirmButtonText: '是',
                      cancelButtonText: '否',
                      type: 'warning'
                    }).then(() => {
                      // 跳转授权页面
                      this.$router.push({ path: '/empower', query: { appid: this.$route.query.applyId }})
                    }).catch((ms) => {
                    })
                  }
                })
              }
            })
          }, 1000);
        }
      }
      // this.$store.commit("apply/SET_ISSAVE", false);
    }
  },
  data() {
    return {
      groupBuy,
      shop,
      // 二维码
      config: {
        value: '', // 显示的值、跳转的地址
        logoSrc: require("../../../assets/config_images/list1.png") // 中间logo的地址
      },
      // 背景
      setBack: "",
      setBackOpcity: "",
      phoneIcon: phoneIcon,
      marketing: marketing,
      NewAll: [],
      PageArr: [],
      AllPage_JSONCON: [],
      nowIdx: 0,
      rightIdx: "1",
      initIaldatas: initialdata,
      comlist: leftbars,
      diyconfigbt: "自定义设置",
      rightTars: [],
      activeNames: 0,
      common: common,
      setDiyCon: "SetDiy",
      addstatus: false,
      addPageStatus: false,
      sortname: false,
      addPageBtnStatus: false,
      groupData: [],
      pageIdx: 0,
      nowComIdx: 0,
      fakeNum: 0,
      amendNewAll: [],
      proupform: {
        sort: "普通页面",
        name: "",
        grouping: "",
        groupname: "",
        sortlist: "",
        urlinfo: ""
      },
      leftbar: [
        {
          id: 0,
          text: "组件",
          iconcheck: "diy-left-box-check",
          iconuncheck: "diy-left-box-uncheck"
        },
        {
          id: 1,
          text: "管理",
          iconcheck: "diy-left-mgt-check",
          iconuncheck: "diy-left-mgt-uncheck"
        }
      ],
      tarbarLis: [
        {
          src: require("../../../assets/config_images/home.png"),
          character: "首页"
        },
        {
          src: require("../../../assets/config_images/shop.png"),
          character: "生活"
        },
        {
          src: require("../../../assets/config_images/person.png"),
          character: "个人中心"
        }
      ]
    };
  },
  mounted() {
    this.loadSetDiy();
    // 加载组件
    this.getPages();
    // 添加监听事件
    history.pushState(null, null, document.URL)
    window.addEventListener('popstate', this.goBack, false)
  },
  methods: {
    goBack() {
      // 该事件仅在浏览器后退按钮被点击时触发
      history.pushState(null, null, document.URL)
      this.$confirm('请确认数据已保存，页面跳转后已填写的数据会被清空，是否继续跳转？', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        // 这里不可以使用back，go（-1）等方法，不然会再次触发该事件进入死循环
        // this.$router.go(-2)
        this.$router.replace("/prolist?type=1")
      }).catch((ms) => {
      })
    },
    showEwm(idx, idxs) {
      // 显示二维码；
      this.config.value = 'https://jjtc.58zltc.com/test?group_idx=' + idx + "&page_idx=" + idxs + "&appid=" + this.$route.query.applyId
    },
    changeBg() {
      // 背景改变时调用
      var BgPageJson = JSON.parse(localStorage.getItem("page_json"));// 全部数据
      for (let i = 0; i < BgPageJson.length; i++) {
        const element = BgPageJson[i];
        // 找到当前页
        if (this.pageIdx === element.id) {
          this.setBack = JSON.parse(element.background).background;
          this.setBackOpcity = JSON.parse(element.background).opacity;
        }
      }
    },
    dianji(item) {
      console.log(item)
      const fakedata = {
        addedIndex: this.fakeNum,
        payload: item,
        removedIndex: null
      };
      this.fakeNum++;
      this.onDrop("NewAll", fakedata);
    },

    upward(idx, ev) {
      console.log(idx)
      // 获取当前节点id,和所有节点对比，判断在什么位置，使用其位置信息
      // if (idx > 0) {
      console.log(ev.path[0].dataset.id)
      // 交换节点
      // console.log(idx);
      var allNodes = $(".box")[0].children;
      var arrIds = [];
      console.log(allNodes)
      for (var i = 0; i < allNodes.length; i++) {
        arrIds.push(allNodes[i].dataset.id);
        if (ev.path[0].dataset.id === allNodes[i].dataset.id) {
          console.log(i)
          document.querySelector(".box").insertBefore(allNodes[i], allNodes[i - 1])
          this.Sort();
          break;
        }
      }
      // }
    },

    downward(idx, ev) {
      console.log(idx)
      // 交换节点
      // if (idx < this.NewAll.length - 1) {
      var allNodes = $(".box")[0].children;
      var arrIds = [];
      for (var i = 0; i < allNodes.length; i++) {
        arrIds.push(allNodes[i].dataset.id);
        if (ev.path[0].dataset.id === allNodes[i].dataset.id) {
          console.log(i)
          console.log(allNodes[i + 1], allNodes[i])
          document.querySelector(".box").insertBefore(allNodes[i + 1], allNodes[i])
          this.Sort();
          break;
        }
      }
      // }
    },

    deletes(item, id, ev) {
      // 删除节点
      console.log(id);
      var allNodes = $(".box")[0].children;
      console.log($(".box")[0].children);
      var arrIds = [];
      for (var i = 0; i < allNodes.length; i++) {
        arrIds.push(allNodes[i].dataset.id);
        // 在所有节点中找到删除的节点
        if (id === parseInt(allNodes[i].dataset.id)) {
          document.querySelector(".box").removeChild(allNodes[i])
          this.Sort();
        }
      }
    },

    Sort() {
      var nodes = $(".box")[0].children;
      var arrIds = [];
      var newDatas = [];
      var sortpageIdx = "";
      var pageDates = JSON.parse(localStorage.getItem("page_json"));
      console.log(nodes);
      for (var i = 0; i < nodes.length; i++) {
        arrIds.push(nodes[i].dataset.id);
      }
      for (const i in pageDates) {
        if (this.$store.state.apply.PageIdx === pageDates[i].id) {
          sortpageIdx = i; // 当前页面位置
          if (nodes.length === 0) {
            pageDates[sortpageIdx].page_json = [];
            localStorage.setItem("page_json", JSON.stringify(pageDates));
            this.NewAll = [];
            break;
          }
          for (let x = 0; x < arrIds.length; x++) {
            for (const y in JSON.parse(pageDates[i].page_json)) {
              console.log(JSON.parse(pageDates[i].page_json)[y])
              if (
                JSON.parse(pageDates[i].page_json)[y].id ===
                parseInt(arrIds[x])
              ) {
                newDatas.push(JSON.parse(pageDates[i].page_json)[y]);
                if (x === arrIds.length - 1) {
                  pageDates[sortpageIdx].page_json = JSON.stringify(newDatas)
                  // this.AllPage_JSONCON = pageDates;
                  // this.$store.commit("apply/SET_PageJSON", this.AllPage_JSONCON);
                  localStorage.setItem("page_json", JSON.stringify(pageDates));
                  break;
                }
              }
            }
          }
        }
      }
    },
    // 右侧Tab切换
    rightBar(idx) {
      console.log(idx);
    },
    // 拖拽排序
    drogJquery() {
      var _that = this;
      $(".box").sortable({
        placeholder: "ui-state-highlight",
        // 只允许垂直拖动
        axis: "y",
        stop: function(event, ui) {
          var node = $(".box")[0].children;
          console.log(node)
          var arrId = [];
          for (var i = 0; i < node.length; i++) {
            arrId.push(node[i].dataset.id);
          }
          console.log(arrId);
          // var pageDate = JSON.parse(localStorage.getItem("page_json"));
          var newData = [];
          var pageDate = JSON.parse(localStorage.getItem("page_json"));
          for (let x = 0; x < arrId.length; x++) {
            for (const i in pageDate) {
              if (_that.$store.state.apply.PageIdx === pageDate[i].id) {
                for (const y in JSON.parse(pageDate[i].page_json)) {
                  if (
                    JSON.parse(pageDate[i].page_json)[y].id ===
                    parseInt(arrId[x])
                  ) {
                    newData.push(JSON.parse(pageDate[i].page_json)[y]);
                  }
                }
              }
            }
          }
          console.log(pageDate[0].page_json)
          pageDate[0].page_json = JSON.stringify(newData)
          localStorage.setItem("page_json", JSON.stringify(pageDate));
        }
      });
      $(".box").disableSelection();
    },
    // 加载分组页面
    getPages() {
      getApplyPageList(this.$route.query.applyId)
        .then(res => {
          console.log(res);
          if (res.code === 200) {
            this.groupData = res.data;
            // name, group_id, id, pagejson: {}
            for (let y = 0; y < res.data.length; y++) {
              if (res.data.length === 0) {
                this.addPageBtnStatus = false;
              } else {
                this.addPageBtnStatus = true;
                // 初始化选中页面
                if (this.groupData[0].page_list.length > 0) {
                  this.pageIdx = this.groupData[0].page_list[0].id;
                }
              }
              console.log(1111)
              for (let i = 0; i < res.data[y].page_list.length; i++) {
                console.log(res.data[
                  y
                ].page_list[i])
                const { name, group_id, page_json, id, app_id, tabbar, background, is_first } = res.data[
                  y
                ].page_list[i];
                const obj = {
                  name,
                  group_id,
                  page_json,
                  id,
                  app_id,
                  tabbar,
                  background,
                  is_first
                };
                this.AllPage_JSONCON.push(obj);
                this.$store.commit("apply/SET_PageJSON", this.AllPage_JSONCON);
              }
            }
          }
        })
        .then(() => {
          // 加载初始化页面
          this.activePage(this.pageIdx);
        });
    },
    // 添加页面
    addGroupingPage() {
      const name = this.proupform.name;
      const appid = this.$route.query.applyId;
      const groupid = this.proupform.sortlist;
      alpplyPages(name, appid, "[]", 1, groupid).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg);
          const { group_id, id, name } = res.data;
          const obj = {
            name,
            group_id,
            id,
            pagejson: []
          };
          // 更新左侧页面列表
          for (const i in this.groupData) {
            if (this.groupData[i].id === group_id) {
              this.groupData[i].page_list.push({
                name,
                id
              });
            }
          }
          this.AllPage_JSONCON.push(obj);
          this.$store.commit("apply/SET_PageJSON", this.AllPage_JSONCON);
          this.$router.go(0);
        }
      });
    },
    // 增加分组
    addGroup() {
      if (this.sortname) {
        const applyid = this.$route.query.applyId;
        addApplyGroup(this.proupform.groupname, applyid).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg);
            // 更新分组
            this.getPages();
          }
        });
        this.sortname = false;
        return;
      }
      if (this.addPageStatus) {
        this.addGroupingPage();
        this.addPageStatus = false;
        return;
      }
    },
    // 当前页面选中
    activePage(idx) {
      this.setBackground('SetDiy');
      var newpage = [];
      this.pageIdx = idx;
      var oldPageJson = JSON.parse(localStorage.getItem("page_json"));// 全部数据
      for (let i = 0; i < oldPageJson.length; i++) {
        const element = oldPageJson[i];
        // 找到当前页
        if (this.pageIdx === element.id) {
          console.log(element.tabbar)
          this.$store.dispatch("tarbar/set_state", JSON.parse(element.tabbar))
          this.$store.commit("backStyle/SET_BACKSTYLE", JSON.parse(element.background))
          this.setBack = JSON.parse(element.background).background;
          this.setBackOpcity = JSON.parse(element.background).opacity;
          // 当页面为空时
          if (JSON.parse(element.page_json) === null) {
            this.NewAll = [];
            this.fakeNum = this.NewAll.length + 1;
          } else {
            // 重新定义id值
            for (let x = 0; x < JSON.parse(element.page_json).length; x++) {
              const cont = JSON.parse(element.page_json)[x];
              cont.id = x + 1;
              newpage.push(cont);
              if (x === JSON.parse(element.page_json).length - 1) {
                oldPageJson[i].page_json = JSON.stringify(newpage);
                // this.AllPage_JSONCON = oldPageJson;
                // this.$store.commit("apply/SET_PageJSON", this.AllPage_JSONCON);
                localStorage.setItem("page_json", JSON.stringify(oldPageJson));
                this.NewAll = newpage;
                this.fakeNum = this.NewAll.length + 1;
              }
            }
          }
        }
      }
      // 获取详细信息
      // getPageDetail(idx).then(res => {
      //   console.log(res)
      //   if (res.code === 200) {
      //     if (res.data.page_json === null) {
      //       res.data.page_json = "[]";
      //     }
      //     this.NewAll = JSON.parse(res.data.page_json);
      //     this.fakeNum = this.NewAll.length + 1;
      //     localStorage.setItem("page_json", res.data.page_json);
      //   }
      // });
      this.$store.commit("apply/SET_PageIdx", idx);
    },
    // 删除当前页面
    delNowPage(groupid, pageid) {
      this.$alert("您确定删除此页面吗？", "删除页面", {
        confirmButtonText: "确定",
        callback: action => {
          delPage(pageid).then(res => {
            if (res.code === 200) {
              for (const i in this.groupData) {
                for (const y in this.groupData[i].page_list) {
                  if (this.groupData[i].page_list[y].id === pageid) {
                    this.groupData[i].page_list.splice(y, 1);
                    this.$router.go(0);
                  }
                }
              }
              this.$message.success(res.msg);
            }
          });
        }
      });
    },
    // 删除页面分组
    delGroupingCon(garoupid) {
      this.$alert("您确定删除此分组吗,删除后该分组内容全部删除。", "删除分组", {
        confirmButtonText: "确定",
        callback: action => {
          delGroup(garoupid).then(res => {
            if (res.code === 200) {
              for (const i in this.groupData) {
                if (this.groupData[i].id === garoupid) {
                  this.groupData.splice(i, 1);
                }
              }
              this.$message.success(res.msg);
            }
          });
        }
      });
    },
    // 更新当前页面内容
    updataNowPageJSON() {
      var comDate = JSON.parse(localStorage.getItem("page_json"));
      for (const i in comDate) {
        if (this.$store.state.apply.PageIdx === comDate[i].id) {
          for (const y in JSON.parse(comDate[i].page_json)) {
            if (JSON.parse(comDate[i].page_json)[y].id === this.$store.state.apply.componentIdx) {
              this.NewAll = JSON.parse(comDate[i].page_json);
              console.log(this.NewAll);
            }
          }
        }
      }
    },
    // 删除组件
    delComponent(id) {
      const page = JSON.parse(localStorage.getItem("page_json"));
      for (const i in page) {
        if (page[i].id === id) {
          this.$confirm("您确认删除该组件吗？")
            .then(() => {
              page.splice(i, 1);
              this.NewAll.splice(i, 1);
              localStorage.setItem("page_json", JSON.stringify(page));
            })
            .catch(() => {});
        }
      }
      // 更新store 中的所有Page_JSON
      // this.$store.commit('apply/SET_PageJSON', JSON.stringify(page));
    },
    // 组件放入手机框触发事件
    onDrop(item, dropResult) {
      console.log(item, dropResult,)
      this[item] = this.applyDrag(this[item], dropResult);
      console.log(this[item])
      // 当前页面数据存入本地JSON
      localStorage.setItem("page_json", JSON.stringify(this[item]));
      // 设置当前页PageJSON内容
      for (const i in this.AllPage_JSONCON) {
        if (this.AllPage_JSONCON[i].id === this.pageIdx) {
          this.AllPage_JSONCON[i].page_json = localStorage.getItem("page_json");
        }
      }
      this.$store.commit("apply/SET_PageJSON", this.AllPage_JSONCON);
    },
    // 组件拖拽到手机框
    applyDrag(arr, dragResult) {
      const { removedIndex, addedIndex, payload } = dragResult;
      if (removedIndex === null && addedIndex === null) return arr;
      const result = [...arr];
      let itemToAdd = {};
      switch (payload.type) {
        case "DiyRubiks":
          itemToAdd.id = result.length + 1;
          itemToAdd.data = this.initIaldatas.rubils
          itemToAdd.type = "DiyRubiks"
          break;
        case "DiyGoodShop":
          itemToAdd.id = result.length + 1;
          itemToAdd.data = this.initIaldatas.shopMarket
          itemToAdd.type = "DiyGoodShop";
          break;
        case "DiyGroupActivity":
          itemToAdd.id = result.length + 1;
          itemToAdd.data = this.initIaldatas.shopMarket
          itemToAdd.type = "DiyGroupActivity";
          break;
        case "DiyShopmarket":
          itemToAdd.id = result.length + 1;
          itemToAdd.data = this.initIaldatas.shopMarket
          itemToAdd.type = "DiyShopmarket";
          break;
        case "DiyShopHead":
          itemToAdd.id = result.length + 1;
          itemToAdd.data = this.initIaldatas.imgOBJ
          itemToAdd.type = "DiyShopHead";
          break;
        case "DiyMarket":
          itemToAdd.id = result.length + 1;
          itemToAdd.data = this.initIaldatas.merketObj
          itemToAdd.type = "DiyMarket";
          break;
        case "DiyImg":
          itemToAdd.id = result.length + 1;
          // this.initIaldatas.ImgObj
          itemToAdd.data = this.initIaldatas.imgOBJ
          itemToAdd.type = "DiyImg";
          break;
        case "DiyActivity":
          itemToAdd.id = result.length + 1;
          // this.initIaldatas.ImgObj
          itemToAdd.data = this.initIaldatas.activityList;
          itemToAdd.type = "DiyActivity";
          break;
        case "DiyAdvert":
          itemToAdd.id = result.length + 1;
          // this.initIaldatas.ImgObj
          itemToAdd.data = this.initIaldatas.setAdvert;
          itemToAdd.type = "DiyAdvert";
          break;
        case "DiyText":
          itemToAdd.id = result.length + 1;
          // this.initIaldatas.wordStyle
          itemToAdd.data = {
            freeStyle: this.$store.state.free.freeStyle
          };
          itemToAdd.type = "DiyFree";
          break;
        case "DiySwiper":
          itemToAdd.id = result.length + 1;
          itemToAdd.data = this.initIaldatas.swiperObj;
          itemToAdd.type = "DiySwiper";
          break;
        case "DiyNav":
          itemToAdd.id = result.length + 1;
          itemToAdd.data = this.initIaldatas.ObjCon;
          itemToAdd.type = "DiyNav";
          break;
        case "DiySearch":
          itemToAdd.id = result.length + 1;
          itemToAdd.data = this.initIaldatas.searchObj;
          itemToAdd.type = "DiySearch";
          break;
        case "DiyTabar":
          itemToAdd.id = result.length + 1;
          itemToAdd.data = {
            WordColor: "",
            checkColor: "",
            barColor: "",
            navstyle: "",
            radio: "",
            idx: "",
            tarbar: ""
          };
          itemToAdd.type = "DiyTabar";
          itemToAdd.show = false;
          break;
        case "DiyList":
          itemToAdd.id = result.length + 1;
          itemToAdd.type = "DiyList";
          itemToAdd.show = false;
          itemToAdd.data = this.initIaldatas.listPageStyle;
          break;
        case "DiyBtn":
          itemToAdd.id = result.length + 1;
          itemToAdd.type = "DiyFree";
          itemToAdd.show = true;
          itemToAdd.data = {
            btnStyle: this.initIaldatas.btnStyle,
            borderStyle: this.initIaldatas.borderStyle,
            word: this.initIaldatas.word,
            freeStyle: this.$store.state.free.freeStyle
          };
          break;
        case "DiyBD":
          itemToAdd.id = result.length + 1;
          itemToAdd.type = "DiyBD";
          itemToAdd.show = false;
          itemToAdd.data = {
            bdobj: this.initIaldatas.bdobj
          };
          break;
        case "DiyVideo":
          itemToAdd.id = result.length + 1;
          itemToAdd.type = "DiyVideo";
          itemToAdd.show = false;
          itemToAdd.data = {
            setvideo: this.initIaldatas.setvideo
          };
          break;
        case "DiyFree":
          itemToAdd.id = result.length + 1;
          itemToAdd.type = "DiyFree";
          itemToAdd.show = false;
          itemToAdd.data = {
            freeStyle: this.$store.state.free.freeStyle
          };
          break;
        default:
          break;
      }

      if (removedIndex !== null) {
        itemToAdd = result.splice(removedIndex, 1)[0];
      }

      if (addedIndex !== null) {
        result.splice(addedIndex, 0, itemToAdd);
      }
      return result;
    },
    // 右键菜单
    showRightMenu(event) {
      return false;
    },
    // 检测当前手机容器内容
    checkPhoneCon(sourceContainerOptions, payload) {
      // console.log(payload);
      // if (payload.type === "DiyText" || payload.type === "DiyImg" || payload.type === "DiyBtn") {
      //   this.$message.info('该组件需添加到自由容器中');
      //   return false;
      // } else {
      //   return true;
      // }
      return true;
    },
    getChildPayload1(index) {
      return this.comlist[index];
    },
    getChildPayload2(index) {
      return this.NewAll[index];
    },
    // 加载设置diy列表
    loadSetDiy() {
      const file = require
        .context("../setdiycomponent/", false, /\.vue$/)
        .keys();
      file.forEach(element => {
        // 文件名称容器
        element = element.replace(/(.*\/)*([^.]+).*/gi, "$2");
        const obj = {
          type: element
        };
        this.rightTars.push(obj);
      });
    },
    setcolor(idx) {
      this.nowIdx = idx;
    },
    // 组件折叠
    handleChange(val) {
      console.log(val);
    },
    // 保存历史记录
    history(val) {
      const PageStr = JSON.stringify(this.NewAll);
      this.PageArr.push(PageStr);
      localStorage.setItem("page", JSON.stringify(this.PageArr));
    },
    // 撤销
    revocation() {
      const val = PageSet(2, this.PageArr, 1);
      this.NewAll = JSON.parse(val);
    },
    // 前进
    advance() {
      const val = PageSet(1, this.PageArr, 1);
      this.NewAll = JSON.parse(val);
    },
    // 显示右侧设置内容
    setRightCon(val, id) {
      console.log(val, id)
      this.setDiyCon = val;
      this.nowComIdx = id;
      // 设置当前选中类型
      this.$store.commit("apply/SET_NowType", val);
      // 设置当前组件id
      this.$store.commit("apply/SET_ComIdx", id);
      // 重置当前点击组件的Vuex
      this.reset(val);
      // this.$store.dispatch('apply/PageJSONUpData', JSON.parse(localStorage.getItem('page_json')))

      switch (val) {
        case "DiyRubiks":
          this.diyconfigbt = "魔方";
          this.setDiyCon = "setdiyRubiks";
          break;
        case "DiyMarket":
          this.diyconfigbt = "营销活动";
          this.setDiyCon = "setdiymerket";
          break;
        case "DiyShopmarket":
          this.diyconfigbt = "推广设置";
          this.setDiyCon = "setShopmarket";
          break;
        case "DiyText":
          this.diyconfigbt = "文本设置";
          this.setDiyCon = "SetDiyText";
          break;
        case "DiyActivity":
          this.diyconfigbt = "活动设置";
          this.setDiyCon = "SetDiyActivity";
          break;
        case "DiyAdvert":
          this.diyconfigbt = "公告设置";
          this.setDiyCon = "SetDiyAvert";
          break;
        case "DiyImg":
          this.diyconfigbt = "图片设置";
          this.setDiyCon = "SetDiyImg";
          break;
        case "DiyBtn":
          this.diyconfigbt = "按钮属性";
          this.setDiyCon = "SetDiyBtn";
          break;
        case "DiySwiper":
          this.diyconfigbt = "轮播图";
          this.setDiyCon = "SetDiySwiper";
          break;
        case "DiyNav":
          this.diyconfigbt = "导航设置";
          this.setDiyCon = "SetDiyNav";
          break;
        case "DiyBD":
          this.diyconfigbt = "公告栏";
          this.setDiyCon = "SetDiyBD";
          break;
        case "DiySearch":
          this.diyconfigbt = "搜索栏";
          this.setDiyCon = "SetDiySearch";
          break;
        case "DiyTabar":
          this.diyconfigbt = "底部导航";
          this.setDiyCon = "SetTarbar";
          break;
        case "DiyList":
          this.diyconfigbt = "编辑列表";
          this.setDiyCon = "SetList";
          break;
        case "DiyVideo":
          this.diyconfigbt = "视频属性";
          this.setDiyCon = "SetVideo";
          break;
        case "DiyFree":
          this.diyconfigbt = "自由容器";
          this.setDiyCon = "SetDiyFree";
          break;
        case "DiyMap":
          break;
        default:
          this.diyconfigbt = "自定义设置";
          break;
      }
    },
    // 设置背景
    setBackground(type) {
      this.diyconfigbt = "自定义设置";
      this.setDiyCon = type;
    },
    // 重置Vuex
    reset(val) {
      console.log(val)
      // 重置Vuex
      var comDate = JSON.parse(localStorage.getItem("page_json"));
      for (const i in comDate) {
        if (this.$store.state.apply.PageIdx === comDate[i].id) {
          for (const y in JSON.parse(comDate[i].page_json)) {
            if (
              JSON.parse(comDate[i].page_json)[y].id ===
              this.$store.state.apply.componentIdx
            ) {
              switch (val) {
                // case "DiyTabar":
                //   console.log(9898989)
                //   this.$store.dispatch("tarbar/set_state", JSON.parse(comDate[i].tabbar));
                //   break;
                case "DiyRubiks":
                  console.log(JSON.parse(comDate[i].page_json)[y].data)
                  this.$store.commit("Rubiks/Set_rubils", JSON.parse(comDate[i].page_json)[y].data)
                  break
                case "DiyMarket":
                  this.$store.commit("merket/Set_obj", JSON.parse(comDate[i].page_json)[y].data)
                  break
                case "DiyShopmarket":
                  this.$store.commit("shopMarket/set_obj", JSON.parse(comDate[i].page_json)[y].data)
                  break
                case "DiyAdvert":
                  this.$store.dispatch("advert/setAdvert", JSON.parse(comDate[i].page_json)[y].data);
                  break;
                case "DiySearch":
                  this.$store.commit("search/SET_searchObj", JSON.parse(comDate[i].page_json)[y].data);
                  break;
                case "DiyList":
                  this.$store.commit("list/SET_ListObj", JSON.parse(comDate[i].page_json)[y].data);
                  break;
                case "DiyActivity":
                  this.$store.commit(
                    "activity/SET_OBJ",
                    JSON.parse(comDate[i].page_json)[y].data
                  );
                  break;
                case "DiyImg":
                  console.log(JSON.parse(comDate[i].page_json)[y].data)
                  this.$store.commit(
                    "imgs/SET_ImgObj",
                    JSON.parse(comDate[i].page_json)[y].data
                  );
                  break;
                case "DiyBtn":
                  this.$store.commit(
                    "btn/SET_WORD",
                    JSON.parse(comDate[i].page_json)[y].data.word
                  );
                  this.$store.commit(
                    "btn/setBtnStyle",
                    JSON.parse(comDate[i].page_json)[y].data.btnStyle
                  );
                  break;
                case "DiyNav":
                  this.$store.commit(
                    "nav/SetNav_Data",
                    JSON.parse(comDate[i].page_json)[y].data
                  );
                  break;
                case "DiySwiper":
                  this.$store.commit('myswiper/SET_SWIPEROBJ', JSON.parse(comDate[i].page_json)[y].data)
                  break;
                case "DiyVideo":
                  this.$store.commit(
                    "video/SET_VIDEO",
                    JSON.parse(comDate[i].page_json)[y].data.setvideo
                  );
                  break;
                default:
                  break;
              }
            }
          }
        }
      }
    },
    setComData(name, val) {
      // 更新右侧边栏标题
      this.setRightCon(name, val);
    },
    setTar() {
      // 点击底部导航
      this.setDiyCon = "SetTarbar";
      this.diyconfigbt = "底部导航";
    }
  },
  destroyed() {
    window.removeEventListener('popstate', this.goBack, false)
  }
};
